<template>
  <view class="form-container">
    <view class="form-group">
      <text style="font-size: 13px; font-weight: bold"
        >({{ olindex + 1 }})意向合作商品</text
      >
      <view v-if="showDelete" class="delete-btn" @click="handleDelete">
        <text
          style="color: red; font-size: 16px"
          class="feiIconfont icon-guanbi"
        ></text>
      </view>
    </view>

    <view class="form-group">
      <text class="label required">商品品牌</text>
      <input
        class="input"
        v-model="localProduct.good_brand"
        placeholder="请输入商品品牌，没有写“无”"
      />
    </view>

    <view class="form-group">
      <text class="label required">商品名称</text>
      <input
        class="input"
        v-model="localProduct.good_name"
        placeholder="请输入商品名称"
      />
    </view>

    <view class="form-group">
      <text class="label required">商品规格</text>
      <input
        class="input"
        v-model="localProduct.good_specification"
        placeholder="请输入商品规格"
      />
    </view>

    <view class="form-group">
      <text class="label required">商品条形码</text>
      <input
        class="input"
        v-model="localProduct.good_bar_code"
        placeholder="请输入商品条形码，若无可填“无”"
      />
    </view>

    <view class="form-group">
      <text class="label required">供货价</text>
      <input
        class="input"
        v-model="localProduct.supply_price"
        placeholder="请输入供货价"
      />
    </view>

    <view class="form-group">
      <text class="label required">市场零售价</text>
      <input
        class="input"
        v-model="localProduct.retail_price"
        placeholder="请输入市场零售价"
      />
    </view>

    <view class="form-group">
      <text class="label required">推荐给补贴的理由</text>
      <input
        class="input"
        v-model="localProduct.introduce_reason"
        placeholder="请输入商品竞争优势"
      />
    </view>

    <view class="form-group">
      <text class="label required">商品附件</text>
      <view class="upload" style="flex: 1">
        <view class="upload-btn" @click="uploadFile">上传文件</view>
        <text class="upload-tip"
          >请上传优势证明文件，如获奖、市场接受度、平台销售数据等</text
        >
        <view
          v-for="(file, index) in goodsUploadedFiles"
          :key="index"
          class="file-item"
        >
          <text class="file-name">{{ file.image_url }}</text>
          <text class="delete-btn-update" @click="removeFile(index)">删除</text>
        </view>
      </view>
    </view>
  </view>
</template>



<script>
import { upload } from "@/request/index.js";
export default {
  props: {
    olindex: Number,
    showDelete: {
      type: Boolean,
      default: false,
    },
    product: Object,
  },
  data() {
    return {
      localProduct: { ...this.product },
      goodsUploadedFiles: [],
    };
  },
  watch: {
    product: {
      handler(newVal) {
        this.localProduct = { ...newVal };
      },
      deep: true,
      immediate: true,
    },
    localProduct: {
      handler(newVal) {
        this.$emit("updateProduct", newVal, this.olindex);
      },
      deep: true,
    },
  },
  methods: {
    //删除图片
    removeFile(index) {
      this.goodsUploadedFiles.splice(index, 1);
      this.localProduct.uploadFileList.splice(index, 1);
    },

    uploadFile() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          this.uploadFileToServer(tempFilePaths[0]);
        },
      });
    },
    async uploadFileToServer(filePath) {
      const res = await upload(
        {
          url: "/SmallProgramApi/ShiFu/uploadImage",
          path: filePath,
          name: "file",
          formData: {
            from_type_id: "56",
          },
        },
        true
      );
      this.localProduct.uploadFileList.push(res.data.file);
      this.goodsUploadedFiles.push(res.data.file);
    },
    //删除模块
    handleDelete() {
      this.$emit("removeProduct", this.olindex);
    },
  },
};
</script>

<style scoped>
.delete-btn-update {
  color: #4caf50;
  font-size: 14px;
  cursor: pointer;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  background-color: #f9f9f9;
  margin-bottom: 5rpx;
}

.file-name {
  flex: 1;
  font-size: 14px;
  color: #333;
  width: 220rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>